<template>
  <div class="csg-pagination">
    <csg-button
      :color="color"
      :type="'primary'"
      :disabled="currentPage <= 1"
      @click="handlePageChange(currentPage - 1)"
    >
      上一页
    </csg-button>

    <template v-for="page in displayedPages" :key="page">
      <span class="csg-pagination-ellipsis" v-if="page === '...'"> ... </span>
      <span
        class="csg-pagination"
        :class="{ 'csg-pagination-active': page === currentPage }"
        v-else
        @click="handlePageChange(page)"
      >
        {{ page }}
      </span>
    </template>

    <csg-button
      :type="'primary'"
      :disabled="currentPage >= totalPages"
      @click="handlePageChange(currentPage + 1)"
    >
      下一页
    </csg-button>

    <div class="csg-pagination__size">
      <span>每页</span>
      <csg-select
        v-model="proPagesSize"
        :options="pageSizeOptions"
        @change="handlePageSizeChange"
      />
      <span>条</span>
    </div>

    <div class="csg-pagination__total">共 {{ total }} 条</div>
  </div>
</template>

<script setup lang="ts">
import CsgButton from '../csgButton/index.vue';
import CsgSelect from '../csgSelect/index.vue';
import { computed } from 'vue';
const color = 'black';

const props = defineProps({
  total: {
    type: Number,
    required: true,
    default: 0,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageRange: {
    type: Number,
    default: 1,
  },
});

const pageSizeOptions = [
  { label: '10', value: 10 },
  { label: '20', value: 20 },
  { label: '30', value: 30 },
  { label: '40', value: 40 },
];

const emit = defineEmits(['update:pageSize', 'update:currentPage', 'change']);

const handlePageSizeChange = (val) => {
  emit('change', {
    pageSize: val.value,
    currentPage: 1,
  });
};
const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
const proPagesSize = computed(() => {
  return props.pageSize;
});
const displayedPages = computed(() => {
  const pages = [];
  const range = props.pageRange;
  const current = props.currentPage;
  const total = totalPages.value;

  if (total <= range * 2 + 1) {
    for (let i = 1; i <= total; i++) {
      pages.push(i);
    }
  } else {
    if (current <= range + 1) {
      for (let i = 1; i <= range * 2 + 1; i++) {
        pages.push(i);
      }
      pages.push('...');
      pages.push(total);
    } else if (current >= total - range) {
      pages.push(1);
      pages.push('...');
      for (let i = total - range * 2; i <= total; i++) {
        pages.push(i);
      }
    } else {
      pages.push(1);
      pages.push('...');
      for (let i = current - range; i <= current + range; i++) {
        pages.push(i);
      }
      pages.push('...');
      pages.push(total);
    }
  }
  return pages;
});

const handlePageChange = (page: number) => {
  if (page < 1 || page > totalPages.value || page === props.currentPage) {
    return;
  }

  emit('change', {
    pageSize: props.pageSize,
    currentPage: page,
  });
};
</script>

<style lang="scss" scoped>
.csg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  &__size {
    display: flex;
    align-items: center;
    margin-left: 16px;
    gap: 8px;

    span {
      color: #606266;
      font-size: 14px;
      cursor: pointer;
    }
  }

  &__total {
    margin-left: 16px;
    color: #606266;
    font-size: 14px;
  }
}
.csg-pagination-active {
  width: 16px;
  line-height: 0px;
  text-align: center;
  border-radius: 5px;
  color: white;
  background-color: #409eff;
}
.csg-pagination {
  cursor: pointer;
}
.csg-pagination-ellipsis {
  cursor: pointer;
}

:deep(.csg-select) {
  width: 50px;
  padding: 2px;
}
</style>
